<template>
  <div class='content'>
    <div class="profile_page">
      <head-top :go-back='goBack' :head-title="profiletitle"></head-top>
    </div>
    <div class="formContain">
      <titlebar :title-left='titleLeft'></titlebar>
      <ul>
        <li class="flex">
          <span class="label">调动人员</span>
          <div>
              <span class="vtext">{{datas.id}}</span>
          </div>
        </li>
          <li class="flex">
              <span class="label">工号</span>
              <div>
                  <span class="vtext">{{datas.personCode}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">入职时间</span>
              <div>
                  <span class="vtext">{{datas.inOrgTime}}</span>
              </div>
          </li>
      </ul>

    </div>
    <div class="formContain">
      <titlebar :title-left='titleLeft1'></titlebar>
      <ul>
        <li class="flex">
          <span class="label">调动前单位</span>
          <div>
            <span class="vtext">{{datas.previousOrg}}</span>
          </div>
        </li>
          <li class="flex">
              <span class="label">调动后单位</span>
              <div>
                  <span class="vtext">{{datas.secondmentOrg}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动前部门</span>
              <div>
                  <span class="vtext">{{datas.previousDept}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动后部门</span>
              <div>
                  <span class="vtext">{{datas.secondmentSecondDept}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动前职务</span>
              <div>
                  <span class="vtext">{{datas.preDuty}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动后职务</span>
              <div>
                  <span class="vtext">{{datas.secondmentDuty}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动前岗位</span>
              <div>
                  <span class="vtext">{{datas.previousPost}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动后岗位</span>
              <div>
                  <span class="vtext">{{datas.secondmentPost}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动前职务等级</span>
              <div>
                  <span class="vtext">{{datas.preDutyRank}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动后职务等级</span>
              <div>
                  <span class="vtext">{{datas.secondmentDutyRank}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动前薪级</span>
              <div>
                  <span class="vtext">{{datas.prePayScales}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动后薪级</span>
              <div>
                  <span class="vtext">{{datas.secondmentPayScales}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动前薪档</span>
              <div>
                  <span class="vtext">{{datas.prePayFile}}</span>
              </div>
          </li>
          <li class="flex">
              <span class="label">调动后薪档</span>
              <div>
                  <span class="vtext">{{datas.secondmentPayFile}}</span>
              </div>
          </li>

        <li class="flex">
          <span class="label">调动文号</span>
          <div>
            <input type="text"  placeholder="请选择" :value="datas.docNum"  readonly style="width: 9rem;padding-right: 0">
          </div>
        </li>
        <li class="flex">
          <span class="label">变动说明</span>
          <div>
            <input type="text"  placeholder="请选择" :value="datas.changeCause"  readonly style="width: 9rem;padding-right: 0">
          </div>
        </li>
          <!--<li class="flex">
              <span class="label">调动附件</span>
              <div  @click="downloadFile('24b6a33ed2c942be94c0046587fff281')">
                  <span class="vtext" >测试附件下载</span>
                  <img src="@/assets/image/ico_down.png" alt="">
              </div>
          </li>
          <li class="flex">
              <span class="label"><i class="require">*</i>审批意见</span>
              <div style="min-height:3rem">
                  <van-field class='full_width' autosize v-model="opinion" type="textarea" input-align="right"/>
              </div>
          </li>-->
      </ul>
    </div>
      <div class="formContain">
          <titlebar :title-left='titleLeft2'></titlebar>
          <ul v-if="attachments.length>0">
              <li class="flex" v-for="(item,index) in attachments" :key="item.attachmentId">
                  <span class="label">附件{{index+1}}</span>
                  <div @click="downloadFile(item.attachmentId)">
                      <span class="vtext" >{{item.attachmentName}}</span>
                      <img src="@/assets/image/ico_down.png" alt="">
                  </div>
              </li>
              <li class="flex">
                  <span class="label"><i class="require">*</i>审批意见</span>
                  <div style="min-height:3rem">
                      <van-field class='full_width' autosize v-model="opinion" type="textarea" input-align="right"/>
                  </div>
              </li>
          </ul>
          <ul v-if="attachments.length<=0">
             <li class="label" style="text-align: center;line-height: 1rem;font-size: 0.54rem">暂无附件</li>
              <li class="flex">
                  <span class="label"><i class="require">*</i>审批意见</span>
                  <div style="min-height:3rem">
                      <van-field class='full_width' autosize v-model="opinion" type="textarea" input-align="right"/>
                  </div>
              </li>
          </ul>
      </div>
    <div class="align_center foot-button">
        <van-button class="cancel-btn" type="primary" @click="saveData('no')">退回</van-button>
        <van-button class="primary-btn" type="primary" @click="saveData('yes')">同意</van-button>
    </div>
    <van-popup v-model="pickershow" position="bottom">
      <van-picker   show-toolbar  :title="title" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
    </van-popup>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker type="date" @confirm="datetimeSelect" @cancel='cancel' v-model="currentTime"/>
    </van-popup>
  </div>
</template>

<script>
  var that;
  let Base64 = require('js-base64').Base64
  import headTop from '@/components/header/head'
  import titlebar from '@/components/titlebar3/titlebar3';
  import {getPersonTransferData,submitApply,getAttachment} from '@/service/getData';
  import {setStore,getStore,getDefault,contextRoot} from '@/assets/config/mUtils';
  import {Dialog, Toast} from 'vant';
  import MyNumberInput from '@/components/numberInput/numberInput';
  import {getUser} from '@/service/getData';

  export default {
      data() {
          return {
              company: "",//所属公司
              profiletitle: '待办事项',
              goBack: true,
              titleLeft: '基本信息',
              titleLeft1: '调动信息',
              titleLeft2: '附件信息',
              show: false, //控制日期显示隐藏
              pickershow: false,//控制下拉选显示隐藏
              pickerName: '',//当前控制日期的控件
              currentTime: new Date(),
              title:'标题',//下拉框标题
              fileName: '',
              datas: {

              },
              partyFigureText: '',
              lookUrl: '',
              useType: 'apply',
              screenHeight: '',
              applyType: '',
              columns:[],
              codeSet:{},
              taskId:'',
              startManagerId:'',
              procInstId:'',
              opinion:'',
              attachments:[]
          }
      },
      created() {
          that = this;
          this.startManagerId = this.$route.query.startManagerId;
          this.taskId = this.$route.query.taskId;
          this.procInstId = this.$route.query.procInstId;
//      this.codeSet = this.$store.state.codeSet;

          var data = {};
          data.app_userId = getStore('user_id');
          data.id = this.startManagerId;
          data.startManagerId = this.startManagerId;
          data.CHECK_TIME = new Date().getTime().toString();
          data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
          getPersonTransferData(data).then(res => {
              console.log(res);
              this.datas = res.data;

          });
          getAttachment(data).then(res=>{
              console.log(res);
              this.attachments = res.data.data;
          })
      },
      mounted() {
          const _self = this;
          this.screenHeight = document.documentElement.clientHeight;
      },
      components: {
          headTop,
          titlebar,
      },
      updated() {
          let that = this;
      },
      filters:{
          dictNum:function(val,arg1){
              if(val!=""&&val!=undefined&&val!=null){
                  if(arg1 == 'getRetireData'){
                      var arr = that.useTemp.filter(item=>item.id === val);
//          console.log(val,arr);
                      return arr[0].text;
                  }else {
                      var arr = that.codeSet[arg1].filter(item=>item.id === val);
//          console.log(val,arr);
                      if(arr){
                          return arr[0].text;
                      }else {
                          return "";
                      }

                  }

              }

          }
      },
      methods: {
          downloadFile(fileId) {
              let baseUrl = contextRoot();

              var form = document.createElement("form");
              form.action = baseUrl + "/file/att/download?app_userId="+getStore('user_id');
              form.style = "display:none";
              form.method = "post";
              form.target = "";
              var input1 = document.createElement("input");
              input1.name = "fileId";
              input1.type = 'hidden';
              input1.value = fileId;
              document.body.appendChild(form);
              form.append(input1);
              form.submit();//表单提交
          },
          addZero(num){
              var addNum = num<10?"0"+num:num;
              return addNum;
          },
          datetimeSelect(value){
              this.show = false;
              var date = value;
              var val = date.getFullYear() + '-'+this.addZero(date.getMonth()+1) + '-'+ this.addZero(date.getDate());
              this.$set(this.datas,this.pickerName,val);
          },
          showpicker(event,name,title,code){
              if(code == 'getRetireData'){
                  this.columns  = this.useTemp;
              }else {
                  this.columns = this.codeSet[code];
              }

              this.pickershow = true;
              this.pickerName = name;
              this.title = title;
          },
          cancel() {
              this.show = false;
          },
          onConfirm(value){
              this.$set(this.datas,this.pickerName,value.id);
              this.pickershow = false;
              console.log(this.datas);
          },
          onCancel(){
              this.pickershow = false;
          },

          showdatepicker(event,name){
              this.show = true;
              this.pickerName = name;
          },
          saveData(msg) {
              if(this.opinion ==''){
                  Toast({
                      message:'必填项不能为空!',
                      duration:'1000',
                  });
                  return;
              }
              Toast.loading({
                  duration: 0,   // 持续展示 toast
                  overlay: true,
                  message: '正在提交...'
              });

              var data = {};
              data.app_userId = getStore('user_id');
              data.CHECK_TIME = new Date().getTime().toString();
              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
              data.taskId = this.taskId;
              data.procInstanceId = Base64.encode(this.procInstId);
              data.msg = msg;
              data.opinion = this.opinion;
              console.log(data);
              submitApply(data).then(res => {
                  Toast.clear();
                  Dialog.alert({
                      title: '提示',
                      message: '审批成功！',
                  }).then(() => {
                      this.$router.go(-1);
                  });
              })
          },

      }
  }

</script>

<style lang="scss" scoped>
  @import '../../../assets/style/mixin';
  @import '../../../assets/style/public';

  .formContain {
    background: #fff;
    ul {
      padding: 0 .54rem;
      .flex {
        justify-content: space-between;
        align-items: center;
        line-height: 2rem;
        border-bottom: 1px solid #e0e0e0;
        padding: 0 .3rem;
        &:nth-last-of-type(1) {
          border: none;
        }
        .label {
          font-size: .56rem;
          line-height: 2rem;
          color: #333333;
        }
        div {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: relative;
          flex-grow: 1;
          img {
            width: .68rem;
            height: .64rem;
          }
          input {
            color: #323233;
            text-align: right;
            font-size: .48rem;
            padding-right: .48rem;
            border: none;
            &:-ms-input-placeholder {
              color: #aaa;
              font-size: .48rem;

            }
          }
          .file {
            width: 2rem;
            height: 1rem;
            font-size: 10rem;
            opacity: 0;
            position: absolute;
            right: 0;
          }
          .van-cell {
            font-size: .48rem;
            padding-right: .48rem;
            padding: 0;
            color: #aaa;
            .van-field__control {
              color: #aaa;
            }
          }

        }
      }
    }
  }

  .foot-button {
    margin-top: 2rem;
    margin-bottom: .4rem;
    .cancel-btn {
      margin-right: 1rem;
    }
  }

  #datetime-picker, #picker {
    position: fixed;
    width: 100%;
    bottom: 0;
  }

  .require {
    color: red;
    margin-right: 4px;
    font-style: inherit;
    font-size: 14px;
  }
  .vtext{
    font-size: 0.48rem;
      text-align: right;
      line-height: 1rem;
  }
  .custom-button {
    width: 30px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 100px;
  }
</style>
